import config from "@/config/config";
import {Link as NavLink} from 'react-router-dom'

const head = config.head

interface NaviProps {
  activeCate: number
  switchCategory: (categoryId: number) => void
}

function Navi(props: NaviProps) {

  return (
    <nav className='middle'>
      {head.navi.map((item, index) => {
        return (
          <NavLink
            key={index}
            to={'/home'}
            className={props.activeCate === item.categoryId ? 'link focus-page' : 'link'}
            onClick={() => props.switchCategory(item.categoryId)}
          >
            {item.page}
          </NavLink>
        )
      })}
    </nav>
  )
}

export default Navi
